<template>
    <view class="comment">
        <view class="comment_header">
            {{ title }}
        </view>
        <ul>
            <li v-for="(item, index) in commentList" :key="index">
                <dl>
                    <dt>
                        <image src="" mode=""></image>
                    </dt>
                    <dd>
                        <p>{{ item.username || userInfo.name }}</p>
                        <text>{{ item.ctime }}</text>
                    </dd>
                </dl>
                <u-rate
                    :value="item.score || item.review_score"
                    active-color="#FA751F"
                    :allowHalf="true"
                    readonly
                ></u-rate>
                <view class="item_desc">
                    {{ item.content || item.review_words||item.words }}
                </view>

                <view class="item_imgurls" v-if="item.imgurls">
                    <image
                        v-for="(items, i) in item.imgurls.split(',')"
                        :key="i"
                        :src="items"
                        mode=""
                    ></image>
                </view>
                <view class="item_imgurls" v-if="item.imgurl">
                    <image
                        v-for="(items, i) in item.imgurl.split(',')"
                        :key="i"
                        :src="items"
                        mode=""
                    ></image>
                </view>
                <view class="item_imgurls" v-if="item.review_imgurls">
                    <image
                        v-for="(items, i) in item.review_imgurls.split(',')"
                        :key="i"
                        :src="items"
                        mode=""
                    ></image>
                </view>
            </li>
        </ul>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    props: {
        title: {
            type: String,
            default: "Reviews",
        },
        commentList: {
            type: Array,
            default: () => [],
        },
        info: {
            type: Object,
            default: () => {},
        },
    },
    computed: {
        userInfo() {
            return this.$store.state.user;
        },
    },
};
</script>

<style lang="scss" scoped>
.comment {
    margin-top: 40rpx;
}

.comment_header {
    font-family: Manrope, Manrope;
    font-weight: bold;
    font-size: 36rpx;
    color: #1c120d;
}

ul {
    margin-top: 20rpx;

    li {
        margin-bottom: 40rpx;

        dl {
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;

            dt {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                background-color: #ccc;
                margin-right: 20rpx;
            }

            dd {
                font-family: Manrope, Manrope;

                p {
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #1c120d;
                }

                text {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #9e6b47;
                    display: block;
                }
            }
        }

        .item_desc {
            font-family: Manrope, Manrope;
            font-weight: 400;
            font-size: 32rpx;
            color: #1c120d;
        }

        .item_imgurls {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20rpx;

            image {
                width: 214rpx;
                height: 214rpx;
                border-radius: 12rpx;
                margin-right: 20rpx;
                background-color: #eeeeee;
            }

            image:nth-child(3n) {
                margin-right: 0 !important;
            }
        }
    }
}
</style>
